<template>
  <div class="child1">
    <h3>子组件1</h3>
    <h4>子组件1的玩具：{{ toy }}</h4>
    <!-- 技巧：谁提供谁绑定事件，谁使用谁触发事件 -->
    <!-- 备注：使用mitt的emitter的emit进行触发事件send-toy，并将toy给子组件2 -->
    <button @click="emitter.emit('send-toy', toy)">玩具给弟弟</button>
  </div>
</template>

<script setup lang="ts" name="Child1">
import { ref } from 'vue'
// 引入mitt的emitter【调用mitt得到emitter，emitter能：绑定事件、触发事件】
import emitter from '@/utils/emitter'

// 数据
let toy = ref('奥特曼')
</script>

<style scoped>
.child1 {
  margin-top: 50px;
  background-color: skyblue;
  padding: 10px;
  box-shadow: 0 0 10px black;
  border-radius: 10px;
}
.child1 button {
  margin-right: 10px;
}
</style>
